<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单列表</span>
        <el-button style="float: right; padding: 3px 0" type="text">
          <router-link :to="{ path: 'login', query: { redirect: '/orders' }}">退出</router-link>
        </el-button>
      </div>
      <el-table
          :data="order_list"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="uid"
            label="订单编号"
            width="120">
            <template scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>工程师: {{ scope.row.order_engineer }}</p>
                <p>地址: {{ scope.row.order_address }}</p>
                <p>产品列表: {{ scope.row.order_item }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag>{{ scope.row.uid }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column
            prop="reserved_at"
            label="下单日期"
            width="210">
            <template scope="scope"><span style="margin-left: 10px">{{ scope.row.reserved_at | formatDate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="scheduled_at"
            label="上门日期">
            <template scope="scope">{{scope.row.scheduled_at | formatDate}}</template>
          </el-table-column>

          <el-table-column
            prop="title"
            label="订单标题"
            width="180">
          </el-table-column>

          <el-table-column
            prop="total"
            label="订单总价"
            :formatter="formatter_total">
          </el-table-column>

          <!-- <el-table-column
            prop="order_address"
            label="地址">
          </el-table-column>

          <el-table-column
            prop="order_items"
            label="产品">
          </el-table-column>

          <el-table-column
            prop="order_engineers"
            label="工程师">
          </el-table-column> -->

          <el-table-column
            prop="status"
            label="状态">
          </el-table-column>
          <el-table-column
            prop="type"
            label="订单类型"
            :formatter="formatter_type">
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="100"
          layout="total, prev, pager, next"
          :total="1000">
        </el-pagination>
    </el-card>
  </div>
</template>
<script>
import api from '@/store/api.js'
import * as types from '@/store/types.js'
  export default{
    data(){
      return{
        order_list: [],
        currentPage: 1
      }
    },
    mounted(){
      this.cleaningOrderList()
    },
    methods: {
      handleSizeChange(){
        console.log(`每页:${val}条`)
      },
      handleCurrentChange(val){
        console.log(`当前页:${val}`);
      },
      cleaningOrderList(){
        this.axios.get(api.cleaning_order_list).then(res => {
          console.log(res.data.paginate_meta);
          // {"paginate_meta":{"current_page":1,"total_pages":0,"total_count":0},"orders":[]}
          this.currentPage = res.data.paginate_meta.current_page;
          res.data.orders.forEach((column, index) => {
            let order_address_tmp   = ''
            let order_items_tmp     = []
            let order_engineers_tmp = []

            order_address_tmp = (column.contact_info.city+column.contact_info.district+column.contact_info.address+'(东家：'+column.contact_info.contact+',电话：'+column.contact_info.telephone+')')

            column.order_items.forEach((tmp, index) => {
              order_items_tmp.push(tmp.order_item.name+'X'+tmp.order_item.units)
            })
            column.engineers.forEach((tmp, index) => {
              order_engineers_tmp.push(tmp.engineer.realname + '('+tmp.engineer.tags+')')
            })
            this.order_list.push(
              {
                'uid': column.uid,
                'reserved_at': column.reserved_at,
                'title': column.title,
                'total': column.total,
                'order_address': order_address_tmp,
                'order_item': order_items_tmp.join(','),
                'order_engineer': order_engineers_tmp.join(','),
                'status': column.status,
                'type': column.type
              }
            )
          })
        })

      },
      tableRowClassName(row, index) {
        if (index % 3 === 0) {
          return 'info-row';
        } else if (index % 3 === 2) {
          return 'positive-row';
        }
        return '';
      },
      formatter_total(row, column){
        return (row.total / 100) + ' 元'
      },
      formatter_reserved_at(row, column){
        var dt = new Date()
        return moment(dt).format('YYYY-MM-DD HH:mm:ss')
      },
      formatter_type(row, column){
        switch(row.type){
          case 'CleaningOrder': return '净洗订单'; break;
          case 'RecyclingOrder': return '回收订单'; break;
          case 'RepairingOrder': return '维修订单'; break;
        }
      }
    }
  }
</script>
<style>
  .el-table .info-row {
    background: #c9e5f5;
  }

  .el-table .positive-row {
    background: #e2f0e4;
  }
</style>
